<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>LGraphCanvas</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="icon" href="../assets/favicon.ico">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="../assets/css/logo.png" title="" width="117" height="52"></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
                    <h2 class="off-left">APIs</h2>
                    <div id="api-tabview" class="tabview">
                        <ul class="tabs">
                            <li><a href="#api-classes">Classes</a></li>
                            <li><a href="#api-modules">Modules</a></li>
                        </ul>
                
                        <div id="api-tabview-filter">
                            <input type="search" id="api-filter" placeholder="Type to filter APIs">
                        </div>
                
                        <div id="api-tabview-panel">
                            <ul id="api-classes" class="apis classes">
                                <li><a href="../classes/ContextMenu.html">ContextMenu</a></li>
                                <li><a href="../classes/LGraph.html">LGraph</a></li>
                                <li><a href="../classes/LGraphCanvas.html">LGraphCanvas</a></li>
                                <li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
                                <li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
                            </ul>
                
                
                            <ul id="api-modules" class="apis modules">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
                    Show:
                    <label for="api-show-inherited">
                        <input type="checkbox" id="api-show-inherited" checked>
                        Inherited
                    </label>
            
                    <label for="api-show-protected">
                        <input type="checkbox" id="api-show-protected">
                        Protected
                    </label>
            
                    <label for="api-show-private">
                        <input type="checkbox" id="api-show-private">
                        Private
                    </label>
                    <label for="api-show-deprecated">
                        <input type="checkbox" id="api-show-deprecated">
                        Deprecated
                    </label>
            
                </div>
            
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
<h1>LGraphCanvas Class</h1>
<div class="box meta">


        <div class="foundat">
            Defined in: <a href="../files/.._src_litegraph.js.html#l4164"><code>..&#x2F;src&#x2F;litegraph.js:4164</code></a>
        </div>


</div>


<div class="box intro">
    <p>marks as dirty the canvas, this way it will be rendered again</p>

</div>

    <div class="constructor">
        <h2>Constructor</h2>
<div id="method_LGraphCanvas" class="method item">
    <h3 class="name"><code>LGraphCanvas</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>canvas</code>
                </li>
                <li class="arg">
                        <code>graph</code>
                </li>
                <li class="arg">
                        <code>options</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4164"><code>..&#x2F;src&#x2F;litegraph.js:4164</code></a>
        </p>



    </div>

    <div class="description">
        
    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">canvas</code>
                        <span class="type">HTMLCanvas</span>


                    <div class="param-description">
                        <p>the canvas where you want to render (it accepts a selector in string format or the canvas element itself)</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">graph</code>
                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>


                    <div class="param-description">
                        <p>[optional]</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">options</code>
                        <span class="type">Object</span>


                    <div class="param-description">
                        <p>[optional] { skip_rendering, autoresize }</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
    </div>

<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

            <li class="api-class-tab methods"><a href="#methods">Methods</a></li>
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

                <div class="index-section methods">
                    <h3>Methods</h3>

                    <ul class="index-list methods">
                            <li class="index-item method">
                                <a href="#method_adjustMouseEvent">adjustMouseEvent</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_bindEvents">bindEvents</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_bringToFront">bringToFront</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_centerOnNode">centerOnNode</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_clear">clear</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_closeSubgraph">closeSubgraph</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_computeVisibleNodes">computeVisibleNodes</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_convertCanvasToOffset">convertCanvasToOffset</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_convertOffsetToCanvas">convertOffsetToCanvas</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_deleteSelectedNodes">deleteSelectedNodes</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_deselectAllNodes">deselectAllNodes</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_deselectNode">deselectNode</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_draw">draw</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawBackCanvas">drawBackCanvas</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawConnections">drawConnections</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawFrontCanvas">drawFrontCanvas</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawGroups">drawGroups</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawNode">drawNode</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawNodeShape">drawNodeShape</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_drawNodeWidgets">drawNodeWidgets</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_enableWebGL">enableWebGL</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_getCanvasWindow">getCanvasWindow</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_isOverNodeBox">isOverNodeBox</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_isOverNodeInput">isOverNodeInput</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_openSubgraph">openSubgraph</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_processDrop">processDrop</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_processKey">processKey</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_processMouseMove">processMouseMove</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_processMouseUp">processMouseUp</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_processMouseWheel">processMouseWheel</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_processNodeWidgets">processNodeWidgets</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_renderInfo">renderInfo</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_renderLink">renderLink</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_resize">resize</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_selectNode">selectNode</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_selectNodes">selectNodes</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_sendToBack">sendToBack</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_setCanvas">setCanvas</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_setGraph">setGraph</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_setZoom">setZoom</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_startRendering">startRendering</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_stopRendering">stopRendering</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_switchLiveMode">switchLiveMode</a>

                            </li>
                            <li class="index-item method">
                                <a href="#method_unbindEvents">unbindEvents</a>

                            </li>
                    </ul>
                </div>



        </div>

            <div id="methods" class="api-class-tabpanel">
                <h2 class="off-left">Methods</h2>

<div id="method_adjustMouseEvent" class="method item">
    <h3 class="name"><code>adjustMouseEvent</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5319"><code>..&#x2F;src&#x2F;litegraph.js:5319</code></a>
        </p>



    </div>

    <div class="description">
        <p>adds some useful properties to a mouse event, like the position in graph coordinates</p>

    </div>




</div>
<div id="method_bindEvents" class="method item">
    <h3 class="name"><code>bindEvents</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4038"><code>..&#x2F;src&#x2F;litegraph.js:4038</code></a>
        </p>



    </div>

    <div class="description">
        <p>binds mouse, keyboard, touch and drag events to the canvas</p>

    </div>




</div>
<div id="method_bringToFront" class="method item">
    <h3 class="name"><code>bringToFront</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5403"><code>..&#x2F;src&#x2F;litegraph.js:5403</code></a>
        </p>



    </div>

    <div class="description">
        <p>brings a node to front (above all other nodes)</p>

    </div>




</div>
<div id="method_centerOnNode" class="method item">
    <h3 class="name"><code>centerOnNode</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5308"><code>..&#x2F;src&#x2F;litegraph.js:5308</code></a>
        </p>



    </div>

    <div class="description">
        <p>centers the camera on a given node</p>

    </div>




</div>
<div id="method_clear" class="method item">
    <h3 class="name"><code>clear</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l3837"><code>..&#x2F;src&#x2F;litegraph.js:3837</code></a>
        </p>



    </div>

    <div class="description">
        <p>clears all the data inside</p>

    </div>




</div>
<div id="method_closeSubgraph" class="method item">
    <h3 class="name"><code>closeSubgraph</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>assigns</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l3938"><code>..&#x2F;src&#x2F;litegraph.js:3938</code></a>
        </p>



    </div>

    <div class="description">
        <p>closes a subgraph contained inside a node</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">assigns</code>
                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>


                    <div class="param-description">
                        <p>a graph</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_computeVisibleNodes" class="method item">
    <h3 class="name"><code>computeVisibleNodes</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5436"><code>..&#x2F;src&#x2F;litegraph.js:5436</code></a>
        </p>



    </div>

    <div class="description">
        <p>checks which nodes are visible (inside the camera area)</p>

    </div>




</div>
<div id="method_convertCanvasToOffset" class="method item">
    <h3 class="name"><code>convertCanvasToOffset</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5387"><code>..&#x2F;src&#x2F;litegraph.js:5387</code></a>
        </p>



    </div>

    <div class="description">
        <p>converts a coordinate from Canvas2D coordinates to graph space</p>

    </div>




</div>
<div id="method_convertOffsetToCanvas" class="method item">
    <h3 class="name"><code>convertOffsetToCanvas</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5378"><code>..&#x2F;src&#x2F;litegraph.js:5378</code></a>
        </p>



    </div>

    <div class="description">
        <p>converts a coordinate from graph coordinates to canvas2D coordinates</p>

    </div>




</div>
<div id="method_deleteSelectedNodes" class="method item">
    <h3 class="name"><code>deleteSelectedNodes</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5291"><code>..&#x2F;src&#x2F;litegraph.js:5291</code></a>
        </p>



    </div>

    <div class="description">
        <p>deletes all nodes in the current selection from the graph</p>

    </div>




</div>
<div id="method_deselectAllNodes" class="method item">
    <h3 class="name"><code>deselectAllNodes</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5268"><code>..&#x2F;src&#x2F;litegraph.js:5268</code></a>
        </p>



    </div>

    <div class="description">
        <p>removes all nodes from the current selection</p>

    </div>




</div>
<div id="method_deselectNode" class="method item">
    <h3 class="name"><code>deselectNode</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5242"><code>..&#x2F;src&#x2F;litegraph.js:5242</code></a>
        </p>



    </div>

    <div class="description">
        <p>removes a node from the current selection</p>

    </div>




</div>
<div id="method_draw" class="method item">
    <h3 class="name"><code>draw</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5461"><code>..&#x2F;src&#x2F;litegraph.js:5461</code></a>
        </p>



    </div>

    <div class="description">
        <p>renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)</p>

    </div>




</div>
<div id="method_drawBackCanvas" class="method item">
    <h3 class="name"><code>drawBackCanvas</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5659"><code>..&#x2F;src&#x2F;litegraph.js:5659</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws the back canvas (the one containing the background and the connections)</p>

    </div>




</div>
<div id="method_drawConnections" class="method item">
    <h3 class="name"><code>drawConnections</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6311"><code>..&#x2F;src&#x2F;litegraph.js:6311</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws every connection visible in the canvas
OPTIMIZE THIS: precatch connections position instead of recomputing them every time</p>

    </div>




</div>
<div id="method_drawFrontCanvas" class="method item">
    <h3 class="name"><code>drawFrontCanvas</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5488"><code>..&#x2F;src&#x2F;litegraph.js:5488</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws the front canvas (the one containing all the nodes)</p>

    </div>




</div>
<div id="method_drawGroups" class="method item">
    <h3 class="name"><code>drawGroups</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6924"><code>..&#x2F;src&#x2F;litegraph.js:6924</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws every group area in the background</p>

    </div>




</div>
<div id="method_drawNode" class="method item">
    <h3 class="name"><code>drawNode</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5807"><code>..&#x2F;src&#x2F;litegraph.js:5807</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws the given node inside the canvas</p>

    </div>




</div>
<div id="method_drawNodeShape" class="method item">
    <h3 class="name"><code>drawNodeShape</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6115"><code>..&#x2F;src&#x2F;litegraph.js:6115</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws the shape of the given node in the canvas</p>

    </div>




</div>
<div id="method_drawNodeWidgets" class="method item">
    <h3 class="name"><code>drawNodeWidgets</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6663"><code>..&#x2F;src&#x2F;litegraph.js:6663</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws the widgets stored inside a node</p>

    </div>




</div>
<div id="method_enableWebGL" class="method item">
    <h3 class="name"><code>enableWebGL</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4138"><code>..&#x2F;src&#x2F;litegraph.js:4138</code></a>
        </p>



    </div>

    <div class="description">
        <p>this function allows to render the canvas using WebGL instead of Canvas2D
this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL</p>

    </div>




</div>
<div id="method_getCanvasWindow" class="method item">
    <h3 class="name"><code>getCanvasWindow</code></h3>

        <span class="paren">()</span>

        <span class="returns-inline">
            <span class="type">Window</span>
        </span>







    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4180"><code>..&#x2F;src&#x2F;litegraph.js:4180</code></a>
        </p>



    </div>

    <div class="description">
        <p>Used to attach the canvas in a popup</p>

    </div>


        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                        <span class="type">Window</span>:
                    <p>returns the window where the canvas is attached (the DOM root node)</p>

            </div>
        </div>


</div>
<div id="method_isOverNodeBox" class="method item">
    <h3 class="name"><code>isOverNodeBox</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4876"><code>..&#x2F;src&#x2F;litegraph.js:4876</code></a>
        </p>



    </div>

    <div class="description">
        <p>retuns true if a position (in graph space) is on top of a node little corner box</p>

    </div>




</div>
<div id="method_isOverNodeInput" class="method item">
    <h3 class="name"><code>isOverNodeInput</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4888"><code>..&#x2F;src&#x2F;litegraph.js:4888</code></a>
        </p>



    </div>

    <div class="description">
        <p>retuns true if a position (in graph space) is on top of a node input slot</p>

    </div>




</div>
<div id="method_openSubgraph" class="method item">
    <h3 class="name"><code>openSubgraph</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>graph</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l3911"><code>..&#x2F;src&#x2F;litegraph.js:3911</code></a>
        </p>



    </div>

    <div class="description">
        <p>opens a graph contained inside a node in the current graph</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">graph</code>
                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>


                    <div class="param-description">
                         
                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_processDrop" class="method item">
    <h3 class="name"><code>processDrop</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5074"><code>..&#x2F;src&#x2F;litegraph.js:5074</code></a>
        </p>



    </div>

    <div class="description">
        <p>process a item drop event on top the canvas</p>

    </div>




</div>
<div id="method_processKey" class="method item">
    <h3 class="name"><code>processKey</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4917"><code>..&#x2F;src&#x2F;litegraph.js:4917</code></a>
        </p>



    </div>

    <div class="description">
        <p>process a key event</p>

    </div>




</div>
<div id="method_processMouseMove" class="method item">
    <h3 class="name"><code>processMouseMove</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4501"><code>..&#x2F;src&#x2F;litegraph.js:4501</code></a>
        </p>



    </div>

    <div class="description">
        <p>Called when a mouse move event has to be processed</p>

    </div>




</div>
<div id="method_processMouseUp" class="method item">
    <h3 class="name"><code>processMouseUp</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4675"><code>..&#x2F;src&#x2F;litegraph.js:4675</code></a>
        </p>



    </div>

    <div class="description">
        <p>Called when a mouse up event has to be processed</p>

    </div>




</div>
<div id="method_processMouseWheel" class="method item">
    <h3 class="name"><code>processMouseWheel</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4847"><code>..&#x2F;src&#x2F;litegraph.js:4847</code></a>
        </p>



    </div>

    <div class="description">
        <p>Called when a mouse wheel event has to be processed</p>

    </div>




</div>
<div id="method_processNodeWidgets" class="method item">
    <h3 class="name"><code>processNodeWidgets</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6813"><code>..&#x2F;src&#x2F;litegraph.js:6813</code></a>
        </p>



    </div>

    <div class="description">
        <p>process an event on widgets</p>

    </div>




</div>
<div id="method_renderInfo" class="method item">
    <h3 class="name"><code>renderInfo</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5632"><code>..&#x2F;src&#x2F;litegraph.js:5632</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws some useful stats in the corner of the canvas</p>

    </div>




</div>
<div id="method_renderLink" class="method item">
    <h3 class="name"><code>renderLink</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>a</code>
                </li>
                <li class="arg">
                        <code>b</code>
                </li>
                <li class="arg">
                        <code>link</code>
                </li>
                <li class="arg">
                        <code>skip_border</code>
                </li>
                <li class="arg">
                        <code>flow</code>
                </li>
                <li class="arg">
                        <code>color</code>
                </li>
                <li class="arg">
                        <code>start_dir</code>
                </li>
                <li class="arg">
                        <code>end_dir</code>
                </li>
                <li class="arg">
                        <code>num_sublines</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6398"><code>..&#x2F;src&#x2F;litegraph.js:6398</code></a>
        </p>



    </div>

    <div class="description">
        <p>draws a link between two points</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">a</code>
                        <span class="type">Vec2</span>


                    <div class="param-description">
                        <p>start pos</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">b</code>
                        <span class="type">Vec2</span>


                    <div class="param-description">
                        <p>end pos</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">link</code>
                        <span class="type">Object</span>


                    <div class="param-description">
                        <p>the link object with all the link info</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">skip_border</code>
                        <span class="type">Boolean</span>


                    <div class="param-description">
                        <p>ignore the shadow of the link</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">flow</code>
                        <span class="type">Boolean</span>


                    <div class="param-description">
                        <p>show flow animation (for events)</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">color</code>
                        <span class="type">String</span>


                    <div class="param-description">
                        <p>the color for the link</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">start_dir</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the direction enum</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">end_dir</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>the direction enum</p>

                    </div>

                </li>
                <li class="param">
                        <code class="param-name">num_sublines</code>
                        <span class="type">Number</span>


                    <div class="param-description">
                        <p>number of sublines (useful to represent vec3 or rgb)</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_resize" class="method item">
    <h3 class="name"><code>resize</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6979"><code>..&#x2F;src&#x2F;litegraph.js:6979</code></a>
        </p>



    </div>

    <div class="description">
        <p>resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode</p>

    </div>




</div>
<div id="method_selectNode" class="method item">
    <h3 class="name"><code>selectNode</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5192"><code>..&#x2F;src&#x2F;litegraph.js:5192</code></a>
        </p>



    </div>

    <div class="description">
        <p>selects a given node (or adds it to the current selection)</p>

    </div>




</div>
<div id="method_selectNodes" class="method item">
    <h3 class="name"><code>selectNodes</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5204"><code>..&#x2F;src&#x2F;litegraph.js:5204</code></a>
        </p>



    </div>

    <div class="description">
        <p>selects several nodes (or adds them to the current selection)</p>

    </div>




</div>
<div id="method_sendToBack" class="method item">
    <h3 class="name"><code>sendToBack</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5416"><code>..&#x2F;src&#x2F;litegraph.js:5416</code></a>
        </p>



    </div>

    <div class="description">
        <p>sends a node to the back (below all other nodes)</p>

    </div>




</div>
<div id="method_setCanvas" class="method item">
    <h3 class="name"><code>setCanvas</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>assigns</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l3961"><code>..&#x2F;src&#x2F;litegraph.js:3961</code></a>
        </p>



    </div>

    <div class="description">
        <p>assigns a canvas</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">assigns</code>
                        <span class="type">Canvas</span>


                    <div class="param-description">
                        <p>a canvas (also accepts the ID of the element (not a selector)</p>

                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_setGraph" class="method item">
    <h3 class="name"><code>setGraph</code></h3>

        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>graph</code>
                </li>
            </ul><span class="paren">)</span>
        </div>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l3880"><code>..&#x2F;src&#x2F;litegraph.js:3880</code></a>
        </p>



    </div>

    <div class="description">
        <p>assigns a graph, you can reasign graphs to the same canvas</p>

    </div>

        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
                <li class="param">
                        <code class="param-name">graph</code>
                        <span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>


                    <div class="param-description">
                         
                    </div>

                </li>
            </ul>
        </div>



</div>
<div id="method_setZoom" class="method item">
    <h3 class="name"><code>setZoom</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l5347"><code>..&#x2F;src&#x2F;litegraph.js:5347</code></a>
        </p>



    </div>

    <div class="description">
        <p>changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom</p>

    </div>




</div>
<div id="method_startRendering" class="method item">
    <h3 class="name"><code>startRendering</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4194"><code>..&#x2F;src&#x2F;litegraph.js:4194</code></a>
        </p>



    </div>

    <div class="description">
        <p>starts rendering the content of the canvas when needed</p>

    </div>




</div>
<div id="method_stopRendering" class="method item">
    <h3 class="name"><code>stopRendering</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4218"><code>..&#x2F;src&#x2F;litegraph.js:4218</code></a>
        </p>



    </div>

    <div class="description">
        <p>stops rendering the content of the canvas (to save resources)</p>

    </div>




</div>
<div id="method_switchLiveMode" class="method item">
    <h3 class="name"><code>switchLiveMode</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l7002"><code>..&#x2F;src&#x2F;litegraph.js:7002</code></a>
        </p>



    </div>

    <div class="description">
        <p>switches to live mode (node shapes are not rendered, only the content)
this feature was designed when graphs where meant to create user interfaces</p>

    </div>




</div>
<div id="method_unbindEvents" class="method item">
    <h3 class="name"><code>unbindEvents</code></h3>

        <span class="paren">()</span>








    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l4090"><code>..&#x2F;src&#x2F;litegraph.js:4090</code></a>
        </p>



    </div>

    <div class="description">
        <p>unbinds mouse events from the canvas</p>

    </div>




</div>
            </div>



    </div>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
